<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <!-- END THEME GLOBAL STYLES -->
    <!-- 分页  style开始  -->
    <link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="width:100%;height:100%;">
    <div id="main" style="width: 1104px;height:464px;">
    </div>
</div>
<script src="../assets/global/plugins/echarts.min.js"></script>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
    //定义echarts容器
    var myChart = echarts.init(document.getElementById('main'), 'macarons');
    option = {
        title : {
            text: '手机品牌',
            subtext: '线、节点样式',
            link: 'http://www.baidu.com',
            target : 'blank',
            left : 'left',
        },
        animationDurationUpdate: 750,
        animationEasingUpdate: 'quinticInOut',
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        /* legend: {
             show : true,
             top: '5%',
             left: '5%',
             orient: 'vertical',
             data: [{
                 name: '树型图',
                 icon: 'rectangle'
             }],
             borderColor: '#c23531'
         },*/
        series : [
            {
                name:'树型图',
                type:'tree',
                expandAndCollapse : true,
                draggable: true,
                orient: 'vertical',  // vertical horizontal
                rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
                nodePadding: 20,
                symbol: 'emptyCircle',
                symbolSize: 40,
                label: {
                    normal: {
                        position: 'top',
                        rotate: 0,
                        verticalAlign: 'bottom',
                        align: 'center',
                        fontSize: 9
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#cc9999',
                                fontSize: 15,
                                fontWeight:  'bolder'
                            }
                        },
                        lineStyle: {
                            color: '#666',
                            width: 1,
                            type: 'solid', // 'curve'|'broken'|'solid'|'dotted'|'dashed',   //线的样式
                            curveness : 0.5  //线的弧度
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        },
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    {
                        name: '手机',
                        value: 6,
                        symbolSize: [60, 40],
                        symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                }
                            }
                        },
                        children: [
                            {
                                name: '小米',
                                value: 4,
                                symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false
                                        }
                                    }
                                },
                                symbolSize: [60, 60],
                                link : 'http://www.baidu.com',
                                children: [
                                    {
                                        name: '小米1',
                                        symbol: 'roundRect',
                                        symbolSize: 20,
                                        value: 4,
                                        itemStyle: {
                                            normal: {
                                                color: '#fa6900',
                                                label: {
                                                    show: true,
                                                    position: 'right'
                                                },

                                            },
                                            emphasis: {
                                                label: {
                                                    show: false
                                                },
                                                borderWidth: 0
                                            }
                                        }
                                    },
                                    {
                                        name: '小米2',
                                        value: 4,
                                        symbol: 'roundRect',
                                        symbolSize: 20,
                                        itemStyle: {
                                            normal: {
                                                label: {
                                                    show: true,
                                                    position: 'right',
                                                    formatter: "{b}"
                                                },
                                                color: '#fa6900',
                                                borderWidth: 2,
                                                borderColor: '#cc66ff'

                                            },
                                            emphasis: {
                                                borderWidth: 0
                                            }
                                        }
                                    },
                                    {
                                        name: '小米3',
                                        value: 2,
                                        symbol: 'roundRect',
                                        symbolSize: 20,
                                        itemStyle: {
                                            normal: {
                                                label: {
                                                    position: 'right'
                                                },
                                                color: '#fa6900',
                                                brushType: 'stroke',
                                                borderWidth: 1,
                                                borderColor: '#999966',
                                            },
                                            emphasis: {
                                                borderWidth: 0
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                name: '苹果',
                                symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',
                                symbolSize: [60, 60],
                                collapsed: true,
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false
                                        }

                                    }
                                },
                                value: 4,
                                children : [
                                    {
                                        name:'iphone 8',
                                        symbol: 'circle',
                                        symbolSize: 20,
                                    },
                                    {
                                        name:'iphone X',
                                        symbol: 'circle',
                                        symbolSize: 20,
                                    }
                                ]
                            },
                            {
                                name: '华为',
                                symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',
                                symbolSize: [60, 60],
                                link : 'http://www.alibaba.com/',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false
                                        }

                                    }
                                },
                                value: 2,
                                children : [
                                    {
                                        name:'huawei',
                                        symbol: 'circle',
                                        symbolSize: 20,
                                    }
                                ]
                            },
                            {
                                name: '联想',
                                //   symbol: 'image://http://www.lenovo.com.cn/HomeUpload/Home001/6d94ee9a20140714.jpg',
                                symbolSize: [40, 40],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false
                                        }

                                    }
                                },
                                children : [
                                    {
                                        name:'lenvo',
                                        symbol: 'circle',
                                        symbolSize: 20,
                                    }
                                ],
                                value: 2
                            }
                        ]
                    }
                ]
            }
        ]
    };
    myChart.setOption(option);

    let parent = document.getElementById('main');
    parent.oncontextmenu = () => false;

    myChart.on('contextmenu', function (params) {
        console.log(params);
        $('.contextBox').remove();
        //  $('#main').append('<div class="contextBox" style="position: absolute; top: '+params.event.offsetY+'; left: '+params.event.offsetX +';width: 100px; height: 100px; border: 1px solid #ccc;"></div>');
        // if(params.data.link) window.open(params.data.link);
        var that = $(this);
        var fa_item_ul = $('<ul class="vakata-context jstree-contextmenu jstree-default-contextmenu item_ul contextBox"></ul>');
        var fa_item_li = ['元数据','浏览数据','SQL查询','刷新'];
        $.each(fa_item_li,function(i,v){
            fa_item_ul.append('<li><a href="#">'+v+'</a></li>')
        });
        fa_item_ul.appendTo($('#main'));
        $('.item_ul').css({'display':'block','position':'absolute','z-index':'1000','background':'#fff','top': params.event.offsetY, 'left': params.event.offsetX }).on('click','li',function(){
            if(that.width() < that.children('i').width()){
                that.css('overflow','hidden');
                that.removeClass('overF_vi');
            }
        });

    });

    $(document).on('click',function(){
        $('.contextBox').remove()
    })

})
</script>

</body>
</html>